<template>
  <div class="mod-home">
    <!-- 访客分析主页面 -->

    <!-- 头部时间选框 -->
    <div class="header">
      <div class="title-right">
        <el-form
          :inline="true"
          @submit.prevent
        >
          <el-form-item :label="$t('dataAnalysis.statisticalTime') + ':'">
            <el-select
              v-model="dateValue"
              style="width: 100px;"
              @change="setDateRange(dateValue)"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span
              v-if="dateValue === 1 || dateValue === 2"
              class="title-time"
            >{{ startTime }} {{ $t('date.tip') }} {{ endTime }}</span>
            <span
              v-if="dateValue === 3"
              class="title-time title-time-span"
            >
              <el-date-picker
                v-model="timeRange"
                class="title-time-Range"
                type="daterange"
                unlink-panels
                range-separator="-"
                :start-placeholder="$t('date.start')"
                :end-placeholder="$t('date.end')"
                :picker-options="pickerOptions"
                value-format="x"
                @change="updateDateTime"
              />
            </span>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 访问深度 -->
    <div class="depth">
      <div class="title">
        <div class="has-tooltip">
          <span>{{ $t("dataAnalysis.depthOfVisit") }}</span>
          <el-popover
            placement="top"
            width="300"
            trigger="hover"
            :content="$t('dataAnalysis.visiContent')"
          >
            <template #reference>
              <div class="tit-mod-btn">
                <div class="que-mark">
                  ?
                </div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="chart">
        <div class="chart-left">
          <common-chart
            v-if="depthBarChart.show"
            :options="depthBarChart.options"
            style="width: 100%; height: 400px"
          />
        </div>
        <div class="chart-right">
          <common-chart
            v-if="depthPieChart.show"
            :options="depthPieChart.options"
            style="width: 100%; height: 400px"
          />
        </div>
      </div>
    </div>

    <!-- 访问地域分布 -->
    <div class="region depth">
      <div class="title">
        <div class="has-tooltip">
          <span>{{ $t("dataAnalysis.visitsGeo") }}</span>
          <el-popover
            placement="top"
            width="300"
            trigger="hover"
            :content="$t('dataAnalysis.geoContent')"
          >
            <template #reference>
              <div class="tit-mod-btn">
                <div class="que-mark">
                  ?
                </div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="chart">
        <div class="chart-left">
          <common-chart
            v-if="regionChart.show"
            :options="regionChart.options"
            style="width: 100%; height: 400px"
          />
        </div>
        <div class="chart-right">
          <common-chart
            v-if="regionPieChart.show"
            :options="regionPieChart.options"
            style="width: 100%; height: 400px"
          />
        </div>
      </div>
      <div class="table">
        <div>
          <!-- 设置表头样式 :header-cell-style="getRowClass"-->
          <el-table
            :data="tableData2"
            style="width: 100%"
            :header-cell-style="getRowClass"
          >
            <el-table-column
              prop="amount1"
              :label="$t('brand.serialNumber')"
              width="120"
            />
            <el-table-column
              prop="amount2"
              :label="$t('dataAnalysis.area')"
              width="180"
            />
            <el-table-column
              prop="amount3"
              sortable
              :label="$t('dataAnalysis.pageviews')"
            />
            <el-table-column
              prop="amount4"
              :label="$t('dataAnalysis.numberOfVisitors')"
            />
            <el-table-column
              prop="amount5"
              :label="$t('dataAnalysis.productViews')"
            />
            <el-table-column
              prop="amount6"
              :label="$t('dataAnalysis.geoContent')"
            />
          </el-table>
        </div>
      </div>
    </div>

    <!-- 系统设备 -->
    <div class="equipment depth">
      <div class="title">
        <div class="has-tooltip">
          <span>{{ $t("dataAnalysis.sysEqui") }}</span>
          <el-popover
            placement="top"
            width="300"
            trigger="hover"
            :content="equipment"
          >
            <template #reference>
              <div class="tit-mod-btn">
                <div class="que-mark">
                  ?
                </div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="chart equi">
        <div class="chart-left">
          <div
            v-for="(item, index) in deviceChartList"
            :key="index"
            class="chart-item"
          >
            <common-chart
              :options="item.options"
              style="width: 100%; height: 305px; margin: auto; display:inline-block"
            />
            <div class="chart-text">
              <p>{{ $t("home.ratio") }}:{{ sumArray ? ((valueArray[index] / sumArray)*100).toFixed(2) : 0 }} %</p>
              <p>{{ $t("dataAnalysis.peopleNum") }}:{{ valueArray[index] }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'

const dateValue = ref(1)
const pickerOptions = reactive({
  shortcuts: [{
    text: $t('dataAnalysis.latestWeek'),
    onClick (picker) {
      const date = new Date()
      const end = moment(moment(date).add(-1, 'days')).endOf('days').valueOf()
      const start = moment(moment(date).add(-7, 'days')).startOf('days').valueOf()
      picker.$emit('pick', [start, end])
    }
  }, {
    text: $t('dataAnalysis.latestMonth'),
    onClick (picker) {
      const date = new Date()
      const end = moment(moment(date).add(-1, 'days')).endOf('days').valueOf()
      const start = moment(moment(date).add(-1, 'month')).startOf('days').valueOf()
      picker.$emit('pick', [start, end])
    }
  }, {
    text: $t('dataAnalysis.latestThreeMonths'),
    onClick (picker) {
      const date = new Date()
      const end = moment(moment(date).add(-1, 'days')).endOf('days').valueOf()
      const start = moment(moment(date).add(-3, 'month')).startOf('days').valueOf()
      picker.$emit('pick', [start, end])
    }
  }],
  disabledDate (time) {
    const date = moment().add(0, 'days').startOf('days')
    return (
      time.getTime() >= date.valueOf()
    )
  }
})
const dateOptions = ref([
  {
    label: $t('dataAnalysis.nearly7'),
    value: 1
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 2
  },
  {
    label: $t('dataAnalysis.custom'),
    value: 3
  }
])
const visitPageList = ref([]) //  访问深度
const visitUserList = ref([]) //  访问地域
const dateRange = ref([]) // 展示的时间参数
const timeRange = ref('')
const startTime = ref('')
const endTime = ref('')
const echartData = ref({
  depthData: {
    xData: [],
    seriesData: [],
    seriesData2: []
  },
  regionData: {
    xData: [],
    seriesData: [],
    seriesData2: []
  },
  equiData: {
    xData: [],
    seriesData: [],
    seriesData2: []
  }
})
const seriesDataArr = ref([]) // 所有数据
const dateArr = ref([]) // 趋势图x数值
const tableData = ref([])
const tableData2 = ref([])
const tableNums = ref(0)
const equipment = reactive($t('dataAnalysis.iosTips') + $t('dataAnalysis.androidTips'))
const sumArray = ref(null) // 系统用户合计
const valueArray = ref([0, 0, 0, 0, 0])
const screenWidth = ref(document.body.clientWidth)

onMounted(() => {
  window.onresize = () => {
    return (() => {
      window.screenWidth = document.body.clientWidth
      screenWidth.value = window.screenWidth
    })()
  }
  init()
})

watch(() => screenWidth.value,
  (val) => {
    screenWidth.value = val
    if (screenWidth.value < 1660) {
      getRegionEchartRight()
    } else {
      getRegionEchartRight()
    }
  })

// 获取分类数据
const init = () => {
  // 获取产品数据
  http({
    url: http.adornUrl('/admin/flowUserAnalysis/getUserAnalysisData'),
    method: 'get',
    params: http.adornParams({
      type: dateValue.value,
      start: timeRange.value ? timeRange.value[0] : null,
      end: timeRange.value ? timeRange.value[1] : null
    })
  }).then(({ data }) => {
    if (data) {
      tableData.value = data
      startTime.value = moment(data.start).format('L')
      endTime.value = moment(data.end).format('L')
      const visitPageList = data.visitPageList
      // 获取访问地域分布数据
      const visitUserList = data.visitUserList
      // 获取访问深度数据
      // ES6 遍历所需数组，获取内部对象，放到声明的数组对象中
      let visit = ''
      visitPageList.forEach(item => {
        // 1:1 2:2 3:3 4:4 5:5 6:6-10 7:11-20 8:20+
        if (item.visitId <= 5) {
          visit = item.visitId
        } else if (item.visitId === 6) {
          visit = '6-10'
        } else if (item.visitId === 7) {
          visit = '11-20'
        } else if (item.visitId === 8) {
          visit = '20+'
        }
        echartData.value?.depthData.xData.push(visit + $t('dataAnalysis.page'))
        echartData.value?.depthData.seriesData.push(item.userNums)

        // 成功了，实现将数据放到数组对象里面了
        echartData.value?.depthData.seriesData2.push({ value: item.userNums, name: visit + $t('dataAnalysis.page') })
      })
      if (visitPageList.length === 0) {
        for (let i = 1; i < 9; i++) {
          if (i <= 5) {
            visit = i + ''
          } else if (i === 6) {
            visit = '6-10'
          } else if (i === 7) {
            visit = '11-20'
          } else if (i === 8) {
            visit = '20+'
          }
          visit = visit + $t('dataAnalysis.page')
          echartData.value?.depthData.xData.push(visit)
          echartData.value?.depthData.seriesData.push(0)
          echartData.value?.depthData.seriesData2.push({ value: 0, name: visit })
        }
      }
      // 访问地域与表格数据
      let i = 1
      visitUserList.forEach(item => {
        echartData.value?.regionData.xData.push(item.provinceName)
        echartData.value?.regionData.seriesData2.push({ value: item.visitNums, name: item.provinceName })
        let stopTime = item.stopTime + $t('dataAnalysis.second')
        if (item.stopTime > 60) {
          stopTime = parseFloat(item.stopTime / 60).toFixed(0) + $t('dataAnalysis.minute') + item.stopTime % 60 + $t('dataAnalysis.second')
        }
        tableData2.value.push({ amount1: i++, amount2: item.provinceName, amount3: item.visitNums, amount4: item.visitUser, amount5: item.prodVisitNums, amount6: stopTime })
      })
      if (visitUserList.length === 0) {
        echartData.value?.regionData.xData.push($t('dataAnalysis.null'))
        echartData.value?.regionData.seriesData2.push({ value: 0, name: $t('dataAnalysis.null') })
        tableData2.value.push({ amount1: 0, amount2: $t('dataAnalysis.null'), amount3: 0, amount4: 0, amount5: 0, amount6: 0 })
      }
      tableNums.value = i - 1

      // 系统设备数据
      echartData.value?.equiData.xData.push('android', $t('sysManagement.miniProgramSmall'), 'h5', 'ios', 'pc')
      echartData.value?.equiData.seriesData.push({ value: data.android, name: 'android' }, { value: data.applets, name: $t('sysManagement.miniProgramSmall') }, { value: data.h5, name: 'h5' }, { value: data.ios, name: 'ios' }, { value: data.pc, name: 'pc' })

      const array = [data.android, data.applets, data.h5, data.ios, data.pc]
      valueArray.value = array
      sumArray.value = array.reduce(function (a, b) {
        return parseInt(a) + parseInt(b)
      }, 0)

      getDepthEchartLeft()
      getDepthEchartRight()
      getRegionEchartRight()
      // getEquiEchartLeft('android', 0)
      // getEquiEchartLeft('wxChat', 1)
      // getEquiEchartLeft('h5', 2)
      // getEquiEchartLeft('ios', 3)
      // getEquiEchartLeft('pc', 4)

      getEquiEchartLeft()
      getRegionEchartLeft()
    }
  })
}
const updateDateTime = () => {
  visitPageList.value = []
  visitUserList.value = []
  dateRange.value = []
  seriesDataArr.value = []
  dateArr.value = []
  tableData.value = []
  tableData2.value = []
  echartData.value = {
    depthData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    },
    regionData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    },
    equiData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    }
  }
  deviceChartList.value = []
  init()
}
// type === 3 时执行的时间绑定请求

/**
 * 重置数据
 */
const reset = () => {
  dateValue.value = 1
  dateOptions.value = [
    {
      label: $t('dataAnalysis.nearly7'),
      value: 1
    },
    {
      label: $t('dataAnalysis.nearly30'),
      value: 2
    },
    {
      label: $t('dataAnalysis.custom'),
      value: 3
    }
  ]
  visitPageList.value = []
  visitUserList.value = []
  dateRange.value = []
  timeRange.value = ''
  startTime.value = ''
  endTime.value = ''
  echartData.value = {
    depthData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    },
    regionData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    },
    equiData: {
      xData: [],
      seriesData: [],
      seriesData2: []
    }
  }
  seriesDataArr.value = []
  dateArr.value = []
  tableData.value = []
  tableData2.value = []
  tableNums.value = 0
  sumArray.value = null
  valueArray.value = [0, 0, 0, 0, 0]
  deviceChartList.value = []
}

/**
 * 头部时间选择款
 * 1: 近七天 2:近30天 3:自然月(前一个月如当前月为7月，自然月为6月)
 */
const setDateRange = (val) => {
  reset()

  dateValue.value = val
  const date = new Date()
  if (val === 1) {
    endTime.value = moment(date).add(-1, 'days').format('L')
    startTime.value = moment(date).add(-7, 'days').format('L')
  } else if (val === 2) {
    endTime.value = moment(date).add(-1, 'days').format('L')
    startTime.value = moment(date).add(-30, 'days').format('L')
  } else if (val === 3) {
    const startTime = moment(date).add(-2, 'days').startOf('days').valueOf()
    const endTime = moment(date).add(-1, 'days').endOf('days').valueOf()
    timeRange.value = [startTime, endTime]
  } else {
    return
  }
  init()
}

const depthBarChart = reactive({
  options: {},
  show: false
})
// 获取访问深度左边的柱状数据图
const getDepthEchartLeft = () => {
  depthBarChart.options = {
    color: ['#0595d4'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [`${$t('dataAnalysis.numberOfVisitors')}`]
    },
    grid: {
      left: 30,
      right: 40,
      top: 55,
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: echartData.value?.depthData.xData,
      // data: ['1页', '2页', '3页', '4页', '5页', '6-10页', '11-20页', '20+页'],
      // xAxis的属性，设置x轴文本不隐藏，同理yAxis也有
      axisLabel: {
        interval: 0, // 坐标轴刻度标签的显示间隔
        rotate: 40 // 标签倾斜的角度
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      name: $t('dataAnalysis.numberOfVisitors'),
      data: echartData.value?.depthData.seriesData,
      type: 'bar',
      barWidth: '45%',
      itemStyle: {
        normal: {
          color: '#155bd4',
          barBorderRadius: [4, 4, 0, 0]
        }
      }
    }]
  }
  depthBarChart.show = true
}

const depthPieChart = reactive({
  options: {},
  show: false
})
// 获取访问深度右边的饼状数据图
const getDepthEchartRight = () => {
  depthPieChart.options = {
    title: {
      text: $t('dataAnalysis.numberOfVisitors'),
      left: 'center',
      textStyle: {
        color: '#666',
        fontWeight: '500',
        fontSize: 12
      }
    },
    color: ['#349EFF', '#FFCC39', '#3DD86B', '#C859F2', '#FF8620', '#3BCAFF', '#FF6850', '#8185FF'],
    tooltip: {
      trigger: 'item',
      formatter: `{b} <br/>{a}: {c} <br/>${$t('home.ratio')}{d}%` // a:series.data.name\b:series.name\c:series.data.value\d:自动计算百分比
      // formatter: '{a}: {c} <br/>占比{d}%'
    },
    series: [
      {
        name: $t('dataAnalysis.numberOfVisitors'),
        type: 'pie',
        radius: ['72%', '28%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: { // 相应数据展示，饼图内部样式的设置
            show: true,
            fontSize: '14',
            color: '#888'
          }
        },
        labelLine: {
          show: false
        },
        data: echartData.value?.depthData.seriesData2
      }
    ],
    legend: {
      orient: 'vertical',
      top: 20,
      right: 'left',
      data: echartData.value?.depthData.xData
    }
  }
  depthPieChart.show = true
}

function randomValue () {
  return Math.round(0)
}

const regionChart = reactive({
  options: {},
  show: false
})
// 获取访问地域分布左边的数据图
const getRegionEchartLeft = () => {
  const oldDataList = [
    { name: '南海诸岛', label: $t('dataAnalysis.southIslands'), value: 0 },
    { name: '北京市', label: $t('dataAnalysis.bj'), value: randomValue() },
    { name: '天津市', label: $t('dataAnalysis.tj'), value: randomValue() },
    { name: '上海市', label: $t('dataAnalysis.sh'), value: randomValue() },
    { name: '重庆市', label: $t('dataAnalysis.cq'), value: randomValue() },
    { name: '河北省', label: $t('dataAnalysis.hb'), value: randomValue() },
    { name: '河南省', label: $t('dataAnalysis.hn'), value: randomValue() },
    { name: '云南省', label: $t('dataAnalysis.yn'), value: randomValue() },
    { name: '辽宁省', label: $t('dataAnalysis.ln'), value: randomValue() },
    { name: '黑龙江省', label: $t('dataAnalysis.hlj'), value: randomValue() },
    { name: '湖南省', label: $t('dataAnalysis.hunan'), value: randomValue() },
    { name: '安徽省', label: $t('dataAnalysis.ah'), value: randomValue() },
    { name: '山东省', label: $t('dataAnalysis.sd'), value: randomValue() },
    { name: '新疆维吾尔自治区', label: $t('dataAnalysis.xj'), value: randomValue() },
    { name: '江苏省', label: $t('dataAnalysis.js'), value: randomValue() },
    { name: '浙江省', label: $t('dataAnalysis.zj'), value: randomValue() },
    { name: '江西省', label: $t('dataAnalysis.jx'), value: randomValue() },
    { name: '湖北省', label: $t('dataAnalysis.hubei'), value: randomValue() },
    { name: '广西壮族自治区', label: $t('dataAnalysis.gx'), value: randomValue() },
    { name: '甘肃省', label: $t('dataAnalysis.gs'), value: randomValue() },
    { name: '山西省', label: $t('dataAnalysis.sx'), value: randomValue() },
    { name: '内蒙古自治区', label: $t('dataAnalysis.nm'), value: randomValue() },
    { name: '陕西省', label: $t('dataAnalysis.shanxi'), value: randomValue() },
    { name: '吉林省', label: $t('dataAnalysis.jl'), value: randomValue() },
    { name: '福建省', label: $t('dataAnalysis.fj'), value: randomValue() },
    { name: '贵州省', label: $t('dataAnalysis.gz'), value: randomValue() },
    { name: '广东省', label: $t('dataAnalysis.gd'), value: randomValue() },
    { name: '青海省', label: $t('dataAnalysis.qh'), value: randomValue() },
    { name: '西藏自治区', label: $t('dataAnalysis.xz'), value: randomValue() },
    { name: '四川省', label: $t('dataAnalysis.sc'), value: randomValue() },
    { name: '宁夏回族自治区', label: $t('dataAnalysis.nx'), value: randomValue() },
    { name: '海南省', label: $t('dataAnalysis.hainan'), value: randomValue() },
    { name: '台湾省', label: $t('dataAnalysis.tw'), value: randomValue() },
    { name: '香港特别行政区', label: $t('dataAnalysis.hk'), value: randomValue() },
    { name: '澳门特别行政区', label: $t('dataAnalysis.macau'), value: randomValue() }
  ]

  const newDataList = echartData.value?.regionData.seriesData2
  // 循环赋值，有数据的更新
  for (let i = 0; i < newDataList?.length; i++) {
    for (let j = 0; j < oldDataList.length; j++) {
      if (newDataList[i].name === oldDataList[j].name) {
        oldDataList[j].value = newDataList[i].value
      }
    }
  }
  regionChart.options = {
    tooltip: {
      formatter: function (params) {
        return params.seriesName + '<br />' + params.name + '：' + params.value
      } // 数据格式化
    },
    visualMap: {
      min: 0,
      left: 'left',
      top: 'bottom',
      text: [$t('dataAnalysis.height'), $t('dataAnalysis.low')], // 取值范围的文字
      inRange: {
        color: ['#e2e2e2', '#0595d4'] // 取值范围的颜色
      },
      show: true // 图注
    },
    geo: {
      map: 'china',
      roam: false, // 不开启缩放和平移
      zoom: 1.23, // 视角缩放比例
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)'
        }
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        emphasis: {
          areaColor: '#d48265', // 鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    series: [
      {
        name: $t('dataAnalysis.pageviews'),
        type: 'map',
        map: 'china',
        geoIndex: 0,
        data: oldDataList
      }
    ]
  }
  regionChart.show = true
}

const regionPieChart = reactive({
  options: {},
  show: false
})
// 获取访问地域分布右边的数据图
const getRegionEchartRight = () => {
  const randomColor = []
  for (let i = 1; i <= 34; i++) {
    let z = 0
    let str = '#'
    let random = 0
    const aryNum = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    for (z = 0; z < 6; z++) {
      random = parseInt(Math.random() * 16)

      str += aryNum[random]
    }
    randomColor.push(str)
  }
  regionPieChart.options = {
    title: {
      text: $t('dataAnalysis.pageviews'),
      left: 'center',
      textStyle: {
        color: '#666',
        fontWeight: '500',
        fontSize: 12
      }
    },
    color: randomColor,
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/>{a}: {c} <br/>占比{d}%'
    },
    legend: {
      orient: 'vertical',
      top: 20,
      right: 'left',
      data: echartData.value?.regionData.xData
      // data: ['广东', '湖北', '其它']
    },
    series: [
      {
        name: $t('dataAnalysis.pageviews'),
        type: 'pie',
        radius: ['70%', '30%'],
        avoidLabelOverlap: false,
        center: screenWidth.value > 1660 ? ['50%', '50%'] : ['30%', '50%'],
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            color: '#888'
          }
        },
        labelLine: {
          show: false
        },
        data: echartData.value?.regionData.seriesData2
      }
    ]
  }
  regionPieChart.show = true
}
// 为表格头行添加样式
const getRowClass = ({ rowIndex }) => {
  if (rowIndex === 0) {
    return {
      background: '#f9f9f9',
      fontWeight: '600',
      color: '#000',
      padding: '20px 0',
      borderBottom: '1px solid #ebeef5',
      borderTop: '1px solid #e7e7eb'
    }
  }
  return ''
}

const deviceChartList = ref([])
// const deviceChart = reactive({
//   options: {},
//   show: false
// })
// 获取系统设备左边的数据图
const getEquiEchartLeft = () => {
  for (let index = 0; index < valueArray.value.length; index++) {
    const deviceChart = {}
    const other = sumArray.value - echartData.value?.equiData.seriesData[index].value
    deviceChart.options = {
      tooltip: {
        trigger: 'item',
        show: true,
        formatter: '{b} <br/>{a}: {c} <br/>占比{d}%'
      },
      graphic: {
        type: 'circle',
        left: 'center',
        top: 'center',
        style: {
          text: ['Android', $t('sysManagement.miniProgramSmall'), 'H5', 'IOS', 'PC'][index],
          textAlign: 'center',
          width: 310,
          height: 30,
          font: '12px blod Microsoft YaHei'
        }
      },
      series: [
        {
          name: $t('dataAnalysis.peopleNum'),
          type: 'pie',
          hoverAnimation: false,
          radius: ['70%', '50%'],
          center: ['50%', '50%'],
          color: [['#1890FF', '#FE5500', '#5FCFFF', '#574EFF', '#F6C023'][index], '#F1F5F9'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          itemStyle: {
            normal: {
              // 设置扇形的阴影
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 2,
              shadowColor: 'rgba(22, 62, 101, 0.1)',
              borderWidth: 1
            }
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '14',
              color: '#888'
            }
          },
          labelLine: {
            show: false
          },
          data: [echartData.value?.equiData.seriesData[index], { value: other, name: $t('prodList.other') }]
        }

      ]
    }
    deviceChart.show = true
    deviceChartList.value.push(deviceChart)
  }
}

</script>

<style lang="scss" scoped>
  @use './index.scss';
</style>
